<template>
  <div>
    <el-container>
      <el-header height="120px">
        <miao-sha-header></miao-sha-header>
      </el-header>
      <el-main>
        <p class="order_head">订单详情</p>
        <el-form label-position="left" label-width="120px">
          <el-form-item label="订单号：">
            {{ this.order.id }}
          </el-form-item>
          <el-form-item label="商品名称：">
            {{ this.order.miaoShaGoods.goods.name }}
          </el-form-item>
          <el-form-item label="商品图片：">
            <img :src="getSrcUrl(this.order.miaoShaGoods.goods.image)"/>
          </el-form-item>
          <el-form-item label="订单价：">
            {{ this.order.totalPrice + '元' }}
          </el-form-item>
          <el-form-item label="订单状态：">
            <span v-show="this.order.status==0">待支付</span>
            <span v-show="this.order.status==1">已支付</span>
            <span v-show="this.order.status==2">已发货</span>
            <span v-show="this.order.status==3">已收货</span>
          </el-form-item>
          <el-form-item label="收货人：">
            {{ this.order.user.name }}
          </el-form-item>
          <el-form-item label="联系电话：">
            {{ this.order.user.phoneNumber }}
          </el-form-item>
          <el-form-item label="收货地址：">
            {{ this.order.user.address }}
          </el-form-item>
        </el-form>
        <el-button type="primary" size="small">立即支付</el-button>
      </el-main>
      <el-footer>
        <miao-sha-footer></miao-sha-footer>
      </el-footer>
    </el-container>
  </div>
</template>

<script>

import MiaoShaHeader from "./common/Header"
import MiaoShaFooter from "./common/Footer"
import sysConfig from "@/config/sys";

export default {
  name: "OrderInfo",
  data() {
    return {
      order: {
        miaoShaGoods: {
          goods: {
            name: '',
            image: 'default.jpg'
          }
        },
        user: {
          name: '',
          phoneNumber: '',
          address: ''
        }
      }

    }
  },
  components: {
    MiaoShaHeader,
    MiaoShaFooter
  },
  methods: {
    getSrcUrl(t) {
      return sysConfig.backUrl + '/image/' + t
    },
    getInfo() {
      let url = sysConfig.backUrl + '/order/detail';
      this.$axios.defaults.headers.common['token'] = window.sessionStorage.getItem("token");
      this.$axios.get(url, {
        params: {
          id: this.$route.params.id
        }
      }).then(response => {
        this.order = response.data.data;
        console.log(this.order)
      }).catch(error => {
        alert(error + "-请联系管理员");
      })
    }
  },
  mounted() {
    this.getInfo();
  }
}
</script>

<style scoped>

.order_head {
  font-weight: bold;
  font-size: 20px;
}
</style>
